// 发请求，获取数据，添加到tbody
function showlink() {
  $.ajax({
    url:'/admin/links',
    success:function (res) {
      // console.log(res)
      let str = ''
      res.data.forEach(item => {
        str += `
        <tr>
          <td>${item.id}</td>
          <td>
            <div class="bg">
              <img src='http://localhost:8888/uploads/${item.linkicon}'>
            </div>
          </td>
          <td>${item.linkname}</td>
          <td>${item.linkurl}</td>
          <td>${item.linkdesc}</td>
          <td>
            <button data-id="${item.id}"
            data-linkname="${item.linkname}" 
            data-linkurl="${item.linkurl}" 
            data-linkdesc="${item.linkdesc}" 
            " type="button" class="layui-btn layui-btn-xs edit">
              编辑
            </button>
            <button data-id="${item.id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">
              删除
            </button>
          </td>
        </tr>
        `
      })
      // 添加到tbody
      $('tbody').html(str)
    }
  })
}
showlink()
let addIndex
// 添加链接  
$('#add-link').on('click',function () {
  // 弹出层
  addIndex = layer.open({
    type:1,
    area:['500px','350px'],
    title: '添加链接',
    content: $('#add-form-tpl').html()
  });  
  // 添加图片
  $('#urlIcon').on('click',function () {
    // console.log(1) 
    // 触发文件域的单击事件
    $('#linkFile').trigger('click')
  })
  // 选择图片，更换预览区图片
  $('#linkFile').on('change',function () {
    // console.dir(this)
    if (this.files.length > 0) {
      let fileObj = this.files[0]
      let url = URL.createObjectURL(fileObj)
      // console.log(url)
      // $('#preIcon').src=url
      $('#preIcon').attr('src', url)     
    }
  })
})
// 提交表单 发送请求完成发送
$('body').on('submit','#add-form',function (e) {
  e.preventDefault()
  // let data = $(this).serialize()
  let fd = new FormData(this)
  // console.log(fd)
  $.ajax({
    type:'post',
    url:'/admin/links',
    data:fd,
    processData: false,
    contentType: false,
    success:function (res) {
      // console.log(res)
      if (res.status === 0) {
        // 关闭窗口
        layer.msg(res.message)
        layer.close(addIndex)
        // 刷新
        showlink()
      }
    }
  })
})
// 删除
$('tbody').on('click','.delete',function () {
  let id = $(this).data('id')
  // console.log(id)
  layer.confirm('确定删除吗？',function (index) {
    $.ajax({
      type:'delete',
      url:'/admin/links/'+id,
      success:function (res) {
        // console.log(res)
        if (res.status === 0) {
          // 关闭窗口
          layer.msg(res.message)
        }
        // 刷新
        showlink()
      }
    })
  })
})
// 编辑
let editIndex
$('tbody').on('click','.edit',function () {
  // 弹出层
  editIndex = layer.open({
    type:1,
    area:['500px','350px'],
    title: '编辑链接',
    content: $('#edit-form-tpl').html()
  });  
  let data = $(this).data()
  console.log(data)
  let form = layui.form
  form.val('editForm',data)

  // 添加图片
  $('#urlIcon').on('click',function () {
    // console.log(1) 
    // 触发文件域的单击事件
    $('#linkFile').trigger('click')
  })
  // 选择图片，更换预览区图片
  let file = null
  $('#linkFile').on('change',function () {
    // console.dir(this)
    // if (this.files.length > 0) {
      let fileObj = this.files[0]
      file = fileObj
      // file = e.target.files[0]
      let url = URL.createObjectURL(fileObj)
      console.log(url)
      // $('#preIcon').src=url
      $('#preIcon').attr('src', url)     
    // }
  })
  let id = $(this).data('id')
  // 提交表单 发送请求完成发送
  $('body').on('submit','#edit-form',function (e) {
    e.preventDefault()
    let fd = new FormData(this)
    console.log(fd)
    if (file) {
      fd.append('linkicon',file)
    }
    $.ajax({
      type:'put',
      url:'/admin/links/' + id,
      data:fd,
      processData: false,
      contentType: false,
      success:function (res) {
        console.log(res)
        if (res.status === 0) {
          // 关闭窗口
          layer.msg(res.message)
          layer.close(editIndex)
        }
        // 刷新
        showlink()
      }
    })
  })
})
